<template>
      <el-button v-if="props.isButton === true" type="primary" @click="show">{{ props.title }}</el-button>
      <el-input v-if="props.isButton === false" :style="{ width: '200px' }" readonly v-model="pd.inputText" :placeholder="props.title">
        <template #prepend>
          <el-button icon="Search" size="small" @click="show"></el-button>
        </template>
      </el-input>

    <!-- 字典搜索对话框 -->
    <el-dialog :title="props.title" v-model="pd.open" width="900px" append-to-body>
        <el-form :model="pd.queryParams" ref="queryRef" :inline="true" >
            <el-form-item label="数据查询" prop="dictLabel">
            <el-input
                v-model="pd.queryParams.name"
                placeholder="请输入名称"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
            />
            <el-input
                v-model="pd.queryParams.userId"
                placeholder="请输入负责人"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
            />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

   
        <el-table v-loading="pd.loading"
            highlight-current-row 
            @select="select1"
            @row-click="clickRow" 
            ref="refTable"
            :data="pd.workShopLineList"
            @selection-change="handleSelectionChange"
            height="260px"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren'}"
            >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="父id" prop="parentId" />
        <el-table-column label="名称" align="center" prop="name" /> 
        <el-table-column label="祖籍" align="center" prop="ancestors" />
        <el-table-column label="面积" align="center" prop="area" />
        <el-table-column label="负责人" align="center" prop="userId" />
        <el-table-column label="是否启用" align="center" prop="enableFlag">
        <template #default="scope">
            <dict-tag :options="sys_is" :value="scope.row.enableFlag"/>
        </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="创建者" align="center" prop="createBy" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
        </el-table-column>
        <el-table-column label="更新者" align="center" prop="updateBy" />
        <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <template #default="scope">
            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
        </template>
        </el-table-column>
        </el-table>
        <pagination
            v-show="pd.total > 0"
            :total="pd.total"
            v-model:page="pd.queryParams.pageNum"
            v-model:limit="pd.queryParams.pageSize"
            @pagination="getList"
        />
 
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handleSelectd">确 定</el-button>
            <el-button @click="pd.open = false">取 消</el-button>
          </div>
        </template>
    </el-dialog>
</template>

<script setup name="WorkShopLineSearch">

import { listWorkShopLine } from "@/api/wms/workShopLine";
import { getCurrentInstance, reactive } from "vue";
const { proxy } = getCurrentInstance();
const { sys_is } = proxy.useDict('sys_is')

const props = defineProps({
    // 字典名称
    title: {
        type: String,
        default: "厂区配置"
    },
    // 是否单选
    isSingle: {
        type: Boolean,
        default: true
    },
    isButton: {
        type: Boolean,
        default: false
    },
    // 数据参数
    workShopLine: {
        type: Object,
        default: null
    }
});

const pd = reactive({
    showSearch: true,
    open: false,
    operation: 0,
    loading: true,
    inputText: "",
    workShopLineList: [],
    total: 0,
    reParams: [],
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        userId: undefined,
    },
});

// 显示弹框
function show() {
    pd.queryParams = { }
    pd.open = true;
    getList();
}

/** 查询厂区|生产车间l生产流水线列表 */
function getList() {
    pd.loading = true;
    listWorkShopLine(pd.queryParams).then(res => {
        pd.workShopLineList = res.data
        pd.total = res.data.length
        pd.loading = false;
    

  /*     listWorkShopLine(pd.queryParams).then(res => {
        pd.workShopLineList = proxy.handleTree(res.data, "id", "parentId")
        pd.total = res.data.length
        pd.loading = false; */
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    pd.queryParams.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    pd.queryParams.name = null
    pd.queryParams.userId = null
    handleQuery();
}

//单选
function select1(selection, row) {
    if (props.isSingle) {
        proxy.$refs["refTable"].clearSelection();
    }
    proxy.$refs["refTable"].toggleRowSelection(row,true);
}

/** 选择操作 */
function handleSelectd() {
    pd.reParams = proxy.$refs["refTable"].getSelectionRows();
    debugger
    if (pd.reParams.length == 0) {
        proxy.$modal.msgError("请选择数据，至少一行!!");
        return;
    }

// test数据
let tempdictValue = pd.reParams.map(item => item.name);
pd.reParams.forEach(function (item) {
    pd.inputText = item.name;
});
pd.open = false;
emit("selectd", pd.reParams);
}

</script>
